<template>
  <div class="create-or-edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ isEdit ? '编辑广告' : '添加广告' }}</span>
      </div>
      <el-form ref="form" :model="content" label-width="80px">
        <el-form-item label="广告名称">
          <el-input v-model="content.name"></el-input>
        </el-form-item>
        <el-form-item label="广告位置">
          <el-select
            v-model="content.spaceId"
            placeholder="请选择">
            <el-option
              v-for="item in advertSpaces"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上线/下线">
            <el-radio v-model="content.status" label="0">下线</el-radio>
            <el-radio v-model="content.status" label="1">上线</el-radio>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="content.startTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="content.endTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="广告链接">
        <el-input v-model="content.link"></el-input>
        </el-form-item>
        <el-form-item label="广告备注">
          <el-input type="textarea" v-model="content.text"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button
             v-if="!isEdit"
            @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getAllSpaces } from '@/services/advert-space'
import { saveOrUpdate, getAdById } from '@/services/advert'
export default {
  name: 'CreateOrEdit',
  // 通过 props 接收父组件传值，判断当前是哪种功能(添加或编辑)
  props: {
    isEdit: {
      type: Boolean,
      // 默认添加功能
      defauly: false
    }
  },
  data () {
    return {
      content: {
        // 广告名称
        name: '',
        // 开始时间
        startTime: '',
        // 结束时间
        endTime: '',
        // 更新时间
        updateTime: '',
        // 创造时间
        createTime: '',
        // 上架状态
        status: '1',
        // 图片地址
        img: '',
        // 链接
        link: '',
        // 广告备注
        text: '',
        // 广告位ID
        spaceId: ''
      },
      // 广告位列表
      advertSpaces: [],
      // 本地图片地址
      imageUrl: ''
    }
  },
  created () {
    // 获取广告位列表
    this.loadAdSpace()
    // 根据id获取广告信息
    if (this.isEdit) {
      this.loadgetAdById()
    }
  },
  methods: {
    // 重置按钮清空数据
    onReset () {
      this.content = []
    },
    // 根据ID获取信息
    async loadgetAdById () {
      const id = this.$route.params.id
      console.log(id)
      const { data } = await getAdById(id)
      if (data.state === 1) {
        this.content = data.content
        this.content.status = this.content.status.toString()
        console.log(this.content.status)
      }
    },
    // 获取广告位
    async loadAdSpace () {
      const { data } = await getAllSpaces()
      this.advertSpaces = data.content
    },
    // 保存或者新增资源
    async onSubmit () {
      const { data } = await saveOrUpdate(this.content)
      if (data.state === 1) {
        // 关闭提示框（需要子组件向父组件传递状态）
        this.$emit('success')
        this.$message.success(`${this.isEdit === true ? '修改' : '添加'}成功`)
        this.$router.push({
          name: 'advert'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
